【後轉前要多久】# Day15 CSS -難東西 (偽元素)

2021 iThome 鐵人賽

DAY 15

Modern Web

後轉前要多久系列第 15 篇

13th鐵人賽

gjlmotea

2021-09-30 23:55:00

825 瀏覽

分享至

這篇紀錄了CSS中不算少見、卻也有些難理解的東西

DOM Tree之中不涵蓋偽元素及偽類別，可以對DOM元素以外的部分做一些修飾、點綴。

DOM Tree

偽元素 Pseudo-elements

偽元素前面通常會掛上兩個冒號::

偽元素不是真正的元素，而是看起來很像元素的虛擬元素，看的到他、卻不存在於DOM結點上。
偽元素因為是假的，必須要加上content屬性才會存在

HTML

...
<div class="a"> DIV </div>
...

CSS

* :not(body){
    outline: 3px orange solid;
}

.a{
    content: "這裡打啥都不會出現";
}

.a::before{
    content: 'before ';
}

.a::after{
    content: 'after ';
}

Chrome開發者模式

可以看到<body>裡只出現一個<div>標籤，
<div>元素底下的內容(content)分別是::before、DIV文字、::after，
::before與::after內容完全不會出現在Chrome瀏覽器的檢查元素中。
而元素border橘色框框居然也只有框出<div>標籤，沒有框出偽元素，可見他根本就不是元素嘛！

CSS

.a{
    outline: 3px orange solid;
    content: "改成這樣也不會出現偽元素的邊框";
}

因為偽元素能夠畫面中呈現的文字並不是因為HTML Element的關係，而是靠CSS渲染出來的，就像幽靈人口，
除非有額外爬CSS、對CSS來作解析，否則爬蟲光是爬HTML或JS是無法爬到偽元素內容的

我們在這個元素掛上偽元素，讓偽元素實體化後，便可對元素進行一些額外的間接操作。

對偽元素加上display: block;以及width、height，讓他具有實體寬高。
CSS

.a::before{
    content: 'before ';
    display: block;
    width: 100px;
    height: 100px;
    background: yellowgreen;
}

.a::after{
    content: 'after ';
    display: block;
    width: 100px;
    height: 100px;
    background: yellow;
}

偽元素實體化

我們來玩一下，
讓HTML只留下空白標籤、稍加修改一下CSS並且加上前一章的絕對定位 position: absolute;
另外將相對定為點設在長出偽元素的元素身上。

HTML

...
<div class="a"></div>
...

CSS

.a{
    position: relative;
}

.a::before{
    content: 'before ';
    display: block;
    width: 150px;
    height: 150px;
    background: yellowgreen;
    position: absolute;
}

.a::after{
    content: 'after ';
    display: block;
    width: 100px;
    height: 100px;
    background: yellow;
    position: absolute;
}

絕對定位偽元素

嗯，這樣感覺很酷，
透過偽元素，我們可以辦到只用一個元素時做不到的事情、效果

偽元素不只`::before`、`::after`

::before、::after是較常出現的兩大宗，
一個指定在該元素前、一個指定在該元素後出現

另外比較常見的還有
::first-letter 指定元素內容中的第一個文字
::first-line 指定元素內容中第一行文字
等等

詳見MDN Pseudo-elements

偽類別 Pseudo-classes

偽類別前面通常會掛上一個冒號:

偽類別不是真正的類別(class)，而是當元件處於一或多個特定狀態時去做選取，
依照使用者互動動態行為而讓當網頁元素處於特殊狀態、事件時(例如被滑鼠覆蓋、被點擊、被選取等等)，
我們可以透過一些偽類別來描述出上述的變化狀態，並根據元素的狀態而設置元素樣式、加以修飾。

偽類別能對DOM產生影響。

常見的有
:link、:visited 未被造訪過、以造訪過的連結
:hover、:active 滑鼠在上方懸浮、被滑鼠選中
:checked、:focus 單選或複選框被確認、元素被聚焦
:is()、:not() 是或否匹配的選取器
:first-chid、:last-child 指定元素底下的第一個、最後一個子元素
:only-child 指定元素底下只有單個子元素(沒有其他兄弟)
:nth-child()、:nth-col() 元素底下第N個子元素、表格網格(table、grid)第N欄